﻿@page "/ps"
@inject IJSRuntime JSRuntime
<div class="card-creator-container">
    <!-- 顶部菜单 -->
    <div class="top-menu">
        <ul>
            <li><a href="#">文件</a></li>
            <li><a href="#">编辑</a></li>
            <li><a href="#">视图</a></li>
            <li><a href="#">设置</a></li>
        </ul>
    </div>

    <!-- 主体区域 -->
    <div class="main-area">
        <!-- 工具栏 -->
        <div class="toolbox">
            <!-- 工具项 -->
        </div>

        <!-- 图片展示区域 -->
        <div class="canvas-container">
            <!-- 在这里展示图片 -->
            <!-- 示例图片，您应该用实际的图片替换 -->
            <img src="/新文件夹/example.jpg" id="draggableImage" class="draggable-image" @mousedown="OnMouseDown" @mouseup="OnMouseUp" />


        </div>

        <!-- 属性/副图选择栏 -->
        <div class="side-panel">
            <!-- 文本输入框和副图选择器 -->
            <div class="text-inputs">
                <input type="text" placeholder="文本框1" />
                <input type="text" placeholder="文本框2" />
                <input type="text" placeholder="文本框3" />
            </div>
            <div class="sub-image-selector">
                <label>副图1:</label>
                <select>
                    <!-- 选项 -->
                </select>
                <input type="text" placeholder="X坐标" @bind="xPosition" @onkeypress="UpdatePosition" />
                <input type="text" placeholder="Y坐标" @bind="yPosition" @onkeypress="UpdatePosition" />
            </div>
            <!-- 滑窗 -->
            <div class="image-scale-slider">
                <label for="imageScale">缩放:</label>
                <input type="range" id="imageScale" min="0.5" max="3" step="0.1" value="@scale" @oninput="OnScaleChanged" />
            </div>
            <!-- 更多属性配置 -->
            <!-- 操作按钮 -->
            <div class="image-actions">
                <button @onclick="SaveImage">保存</button>
                <button @onclick="EditImage">编辑</button>
                <button @onclick="ExportImage">导出</button>
            </div>
        </div>
    </div>
</div>

@code {

    private bool isDragging = false;
    private double originalX, originalY;
    private double currentX, currentY;
    private double scale = 1;
    private string ImageId => "draggableImage"; // 确保与 img 元素的 id 属性匹配


    private async Task OnMouseMove(MouseEventArgs e)
    {
        if (isDragging)
        {
            currentX += e.ClientX - originalX;
            currentY += e.ClientY - originalY;
            originalX = e.ClientX;
            originalY = e.ClientY;

            await JSRuntime.InvokeVoidAsync("blazorInterop.setImageTransform", ImageId, currentX, currentY, scale);
        }
    }
    private double xPosition;
    private double yPosition;

    private async Task UpdatePosition(KeyboardEventArgs e)
    {
        if (e.Code == "Enter" || e.Key == "Enter")
        {
            await JSRuntime.InvokeVoidAsync("blazorInterop.setImageTransform", ImageId, xPosition, yPosition, scale);
        }
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("blazorInterop.enableDrag", ImageId);
            await JSRuntime.InvokeVoidAsync("blazorInterop.addWheelListener", ImageId, DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public async Task OnWheel(double delta)
    {
        scale += delta > 0 ? -0.1 : 0.1;
        scale = Math.Max(0.5, Math.Min(scale, 3)); // 确保缩放在0.5到3之间
        await JSRuntime.InvokeVoidAsync("blazorInterop.setImageTransform", ImageId, currentX, currentY, scale);
    }
    private async Task OnMouseDown(MouseEventArgs e)
    {
        isDragging = true;
        originalX = e.ClientX;
        originalY = e.ClientY;
    }

    private async Task OnMouseUp(MouseEventArgs e)
    {
        isDragging = false;
    }

    private async Task OnScaleChanged(ChangeEventArgs e)
    {
        if (double.TryParse(e.Value?.ToString(), out double newScale))
        {
            scale = newScale;
            await JSRuntime.InvokeVoidAsync("blazorInterop.setImageTransform", ImageId, currentX, currentY, scale);
        }
    }
    private void SaveImage()
    {
        // 实现保存图片的逻辑
    }

    private void EditImage()
    {
        // 实现编辑图片的逻辑
    }

    private async Task ExportImage()
{
    var imageDataUrl = await JSRuntime.InvokeAsync<string>("blazorInterop.getImageDataUrl", ImageId);
    var fileName = "exported_image.png";

    // 调用 JavaScript 函数来创建下载链接并触发下载
    await JSRuntime.InvokeVoidAsync("blazorInterop.downloadFile", imageDataUrl, fileName);
}

}